@import 'scss-imports/cssvars';

.card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-content {
  display: flex;
  flex-direction: column;
  height: 100%;

  .header {
    padding-bottom: 12px;
    padding-right: 12px;
  }

  .container {
    padding: 4px 16px 16px;
  }
}

.header {
  display: flex;
  justify-content: space-between;

  h3 {
    font-size: 24px;
  }
}

mat-grid-list[cols='2'] {
  ul li:nth-child(2) {
    .value {
      font-size: 11px;
    }

    @media (max-width: $breakpoint-xs) {
      .label {
        display: none;
      }
    }
  }
}

.grid-tile {
  background-color: var(--bg1);
  border-radius: 2px;
  opacity: 0.7;

  ul {
    margin: 0;
    padding-left: 0;
  }

  .tile {
    align-items: stretch;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
    padding: 0 0 0 12px;
    place-content: stretch flex-start;
    width: 100%;

    @media (max-width: $breakpoint-xs) {
      padding: 0 8px;
    }

    .tile-header {
      align-items: center;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      min-width: 0;
      place-content: center flex-start;
    }

    .tile-header-title {
      flex: 1;
      font-size: 24px;
      line-height: 2;
      overflow: hidden;
      padding-top: 8px;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tile-content {
      box-sizing: border-box;
      display: flex;
      flex: 1 1 1e-9px;
      flex-direction: row;
      font-size: 12px;
      padding-bottom: 10px;
      place-content: center space-between;

      .divider {
        background-color: var(--lines);
        height: 75%;
        margin-right: 12px;
        width: 1px;

        @media (max-width: $breakpoint-xs) {
          margin: 0 2px;
        }
      }

      ul {
        box-sizing: border-box;
        display: flex;
        flex: 1 1 100%;
        flex-direction: column;

        @media (max-width: $breakpoint-xs) {
          max-width: 100% !important;
        }
      }

      li {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;

        .label {
          margin-right: 2px;
        }

        .label,
        .value {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    span.icon {
      align-items: center;
      cursor: default;
      display: inline-flex;
      height: 20px;
      min-width: 20px;
      user-select: none;
      width: 20px;

      &.error {
        color: var(--red);
      }

      &.warn {
        color: var(--orange);
      }

      &.safe {
        color: var(--green);
      }

      .ix-icon {
        height: 16px;
        width: 16px;
      }
    }
  }

  .skimpy-tile {
    .tile-header-title {
      font-size: 20px !important;
      line-height: 1.8 !important;
      padding-top: 0;
    }
  }

  .create-new {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    font-size: 24px;
    height: 100%;
    max-width: 100%;
    opacity: 0.7;
    place-content: center;
    width: 100%;

    &:focus-visible {
      box-shadow: 0 0 0 1.5px var(--accent) inset;
    }

    .create-pool-icon {
      height: 48px;
      width: 48px;
    }
  }
}

.skeleton {
  display: flex;
  width: 100%;
}
